<template>
  <view>
    <view class="state-box">
      <view class="headline">
        <view>
          <view>ML202306120003-压缩机</view>
        </view>
      </view>
      <view class="information">
        报修编号：KUIOB202306210016
      </view>
      <view class="information">
        保修人员：张楚岚
      </view>
    </view>

    <view class="box">

      <u--form labelPosition="left" ref="uForm" :rules="rules" :model="model1">
        <u-form-item label="保养项目:" labelWidth="200px" borderBottom required prop="userInfo.name1">
          <u--input disabledColor="#ffffff" placeholder="DFS202326598/月度保养" border="none" v-model="model1.userInfo.name1"></u--input>
        </u-form-item>
        <u-form-item label="保养标准:" labelWidth="200px" prop="userInfo.sex" borderBottom>
          <u--input disabledColor="#ffffff" placeholder="设备正常使用" border="none"></u--input>
        </u-form-item>

        <u-form-item label="指导文件:" labelWidth="200px" borderBottom>
          <u--input disabled disabledColor="#ffffff" placeholder="请选择文件" border="none"></u--input>
          <u-icon slot="right" name="arrow-right" color="#d4c5c5"></u-icon>
        </u-form-item>

        <u-form-item label="保养描述:" labelWidth="auto" borderBottom requird prop="userInfo.name2">
          <u--input disabledColor="#ffffff" placeholder="请描述" border="none" v-model="model1.userInfo.name2"></u--input>
        </u-form-item>

        <u-form-item label="是否更换零部件:" labelWidth="auto" borderBottom required prop="userInfo.name3">
          <!-- <u-radio-group placement="row" v-model="value1">
            <u-radio activeColor="rgba(56, 222, 255, 1) " label="是"></u-radio>
          </u-radio-group>

          <u-radio-group placement="row" v-model="value2" @click="change2">
            <u-radio activeColor="rgba(56, 222, 255, 1)" label="否" labelPosition="right"></u-radio>
          </u-radio-group> -->
          
          <u-radio-group
          iconPlacement="left"
    v-model="radiovalue1"
    placement="row"
    @change="groupChange"
  >
    <u-radio
      :customStyle="{marginBottom: '8px'}"
      v-for="(item, index) in radiolist1"
      :key="index"
      :label="item.name"
      :name="item.name"
      @change="radioChange"
    >
    </u-radio>
  </u-radio-group>

          
        </u-form-item>
        <u-form-item label="备注:" labelWidth="200px" borderBottom required>
          <u--input disabledColor="#ffffff" placeholder="请描述" border="none"></u--input>
        </u-form-item>


        <u-form-item label="附件:" labelWidth="200px" borderBottom>
          <u--input disabled disabledColor="#ffffff" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"  color="#d4c5c5"></u-icon>
        </u-form-item>
      </u--form>

    </view>
    <view class="butt">
      <view class="verification verification2">
        取消
      </view>
      <view class="verification verification1">
        提交
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
       
        showSex: false,
        form : {},
        model1: {
          userInfo: {
            name1: '',
           name2: '',
           name3: '',
          },
        },


        radio: '',
        switchVal: false,
       rules: {
         'userInfo.name1': {
           type: 'string',
           message: '请输入项目',
           trigger: ['blur', 'change']
         },
         'userInfo.name2': {
           type: 'string',
           message: '请输入项目',
           trigger: ['blur', 'change']
         },
         'userInfo.name3': {
           type: 'string',
           					max: 1,
           					required: true,
           					message: '请选择是或否',
           					trigger: ['blur', 'change']
         }
         },
        
        // 基本案列数据
                  radiolist1: [{
                    name: '是',
                    disabled: false
                  },
                    {
                      name: '否',
                      disabled: false
                    },
                    
                  ],
                  // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
                  radiovalue1: '是',
      }
    },
methods:{
  groupChange(n) {
          console.log('groupChange', n);
        },
        radioChange(n) {
          console.log('radioChange', n);
        }
  	

}
  }
</script>

<style lang="scss">
  ::v-deep .u-radio-group--row{
      justify-content: space-around;
  }
  ::v-deep .u-form-item__body__left {
    width: 120px !important;
  }

  .state-box {
    margin: 32rpx 32rpx 48rpx 32rpx;
    padding: 48rpx 0 32rpx 32rpx;
    // height: 450rpx;
    opacity: 1;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

    .information {
      opacity: 0.3;
      /** 文本1 */
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      margin-top: 25rpx;
    }

    .headline {
      height: 38rpx;
      opacity: 1;
      /** 文本1 */
      font-size: 32rpx;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 38rpx;
      color: rgba(32, 37, 64, 1);
      text-align: left;
      vertical-align: top;

    }
  }

  .box {
    margin: 0 auto;
    width: 85%;
    // padding: 48rpx 0 32rpx 32rpx;
    // height: 450rpx;
    opacity: 1;

    background: rgba(255, 255, 255, 1);
  }

  .butt {
    margin: 100rpx 32rpx 48rpx 32rpx;

    .verification {
      display: inline-block;
      height: 64rpx;
      opacity: 1;
      border-radius: 60rpx;
      margin-bottom: 0 !important;
      font-size: 32rpx;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 64rpx;
      text-align: center;
      vertical-align: top;
    }

    .verification1 {
      background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
      width: 300rpx;
      margin-left: 30rpx;
      color: rgba(255, 255, 255, 1);
    }

    .verification2 {
      border: 2rpx solid rgba(56, 175, 255, 1);
      margin-left: 30rpx;
      width: 300rpx;
      color: rgba(32, 37, 64, 1);
    }
  }
  // ::v-deep .u-form-item{
  //     display: flex;
  //     flex-direction: column;
  //     font-size: 14px;
  //     width: 97%;
  //     color: #303133;
  // }
  ::v-deep .u-tag__text--warning {
    color: #38d6ff !important;
    font-size: 14rpx !important;
}
</style>
